<template>
  <div>
    <div class="vip_pic">
      <div class="vip_pic_middle">
        <!-- 轮播图 -->
        <Carousel :list="list"></Carousel>
        <!-- <div class="vip_pic_1">
          <a href=""><img src="./images/1637214872783.jpg" alt="" /></a>
          <a href=""><img src="./images/1637142973264.jpg" alt="" /></a>
         
          <div class="icon">
            <div onclick="previous()" class="iconfont icon-youjiantou1"></div>
            <div onclick="nextImg()" class="iconfont icon-zuojiantou"></div>
          </div>
        </div> -->

        <!-- <div class="vip_pic_foot">
          <span
            >富安娜家纺 全场1折起
            <div class="vip_pic_line"></div>
          </span>
          <li class="vip_pic_cut"></li>
          <span
            >安踏 全场低至1.1折
            <div></div>
          </span>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Vippic",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    axios.get("http://localhost:3000/vippc").then((data) => {
      this.list = data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.vip_pic {
  position: relative;
  background: url("./images/1636944500230.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  width: 100%;
  height: 460px;
  .vip_pic_middle {
    width: 1170px;
    margin: 0 auto;
    height: 422px;
    transform: translateY(30px);

    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1px 3px rgb(167 167 167 / 40%);
    .vip_pic_1 {
      padding: 12px 12px 0px 12px;
      width: 1146px;
      margin: 0 auto;
      height: 400px;
      position: relative;
      overflow: hidden;
      img {
        position: absolute;
        left: 0;
        top: 0px;
        width: 100%;
        float: left;
      }
      .icon-youjiantou1 {
        position: absolute;
        top: 50%;
        right: 0px;
        font-size: 50px;
        transform: translate(-25px, -25px);
      }
      .icon-zuojiantou {
        position: absolute;
        top: 50%;
        left: 0px;
        font-size: 50px;
        transform: translate(25px, -25px);
      }
    }
    .vip_pic_foot {
      text-align: center;
      height: 40px;
      span {
        position: relative;
        display: inline-block;
        width: 229px;
        line-height: 40px;
        color: #333;
        font-size: 11px;
        text-align: center;
      }
      .vip_pic_cut {
        display: inline-block;
        width: 1px;
        height: 12px;
        background-color: #ccc;
      }

      .vip_pic_line {
        position: absolute;
        bottom: -3px;
        left: 0;
        height: 3px;
        width: 229px;
        background-color: #e6057d;
      }
    }
  }
}
</style>
